<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '悬赏征婚❤缘分定制',
  },
}
</route>

<template>
  <view class="absolute left-0 right-0 top-0 bottom-0">
    <z-paging 
      ref="pagingRefs" 
      v-model="dataList" 
      :default-page-size="10"
      :refresher-complete-delay="500"
      :safe-area-inset-bottom="true"
      :auto="false"
      @query="queryList"
    >
      <template #top>
        <!-- 导航 -->
        <!--  #ifdef MP-WEIXIN -->
        <wd-navbar 
          placeholder 
          safeAreaInsetTop 
          left-arrow 
          @click-left="back"
        >
          <template #title>
            <view class="flex-center font-size-32rpx">悬赏征婚 <i class="iconfont icon-yuanfendingzhi color-red"></i> 缘分定制</view>
          </template>
        </wd-navbar>
        <!--  #endif -->
          
        <view class="w-center flex-sb-center pt-24rpx">
          <!-- <view class="font-size-26rpx flex-a-center" 
            v-if="pagination.provinceId"
            @click="handleClear"
          >
            <i class="iconfont icon-close font-size-28rpx mr-8rpx color-#9C6DEF"></i>
            <text class="mb-2rpx color-#9C6DEF">清空</text>
          </view> -->
          <view></view>
          <view class="font-size-26rpx flex-a-center" 
            @click="toSelectAddress"
          >
            <i class="iconfont icon-dingwei font-size-36rpx mr-8rpx color-#9C6DEF"></i>
            <text class="mb-2rpx color-#9C6DEF">{{ city }}</text>
          </view>
        </view>
      </template>
      <!-- 红娘列表 -->
      <view class="w-750rpx m-a">
        <!-- 加载中 -->
        <view class="flex-center py-50rpx" v-if="loading">
          <wd-loading size="32rpx" color="#9C6DEF" />
        </view>

        <matchmaker-item
          v-for="item in dataList"
          :key="item.id"
          :data="item"
          @handleClick="handleShowImg"
        />
      </view>
    </z-paging>
    
    <wd-overlay :show="showOverlay" @click="showOverlay = false">
      <view class="w-464rpx bg-#fff position-center rounded-24rpx" @click.stop="">
        <view class="w-400rpx h-400rpx m-a !mt-32rpx bg-#f1f1f1 rounded-24rpx font-size-0">
          <wd-img 
            width="400rpx" 
            height="400rpx" 
            :round="false"
            mode="aspectFill"
            :show-menu-by-longpress="true"
            :src="imgUrl" 
          />
        </view>
        <view class="color-#999 font-size-24rpx text-center pb-32rpx pt-24rpx">
          <!-- <view class="pb-12rpx color-#9C6DEF" @click="makeCall(contactPhone)">
            <i class="iconfont icon-bodadianhua inline-block font-size-24rpx mr-2rpx"></i>
            {{ contactPhone }}
          </view> -->
          长按识别二维码联系红娘
        </view>
      </view>
    </wd-overlay>
  </view>
</template>
  
<script lang="ts" setup>
import MatchmakerItem from "@/components/list-item/matchmaker-item.vue";
import { GetMatchmakerInfoPage } from '@/service/db_feature';
import { useThemeStore } from '@/store';
import { back } from '@/utils';

// 主题颜色
const { themeConfig } = useThemeStore();
const showOverlay = ref(false);
const imgUrl = ref('');
const contactPhone = ref('');
const handleShowImg = (item) => {
  showOverlay.value = true;
  imgUrl.value = item.wechatQrcodeUrl;
  contactPhone.value = item.contactPhone;
}

// 拨打电话
const makeCall = (phoneNumber = '') => {
  uni.makePhoneCall({
    phoneNumber,
    success: (success) => {
      console.log(success)
    }
  })
}

// 请求payload参数
const pagination = reactive<AnyObj>({
  status: 2
});
const dataList = ref([]);
const pagingRefs = ref();
const loading = ref(false);
const queryList = async (pageNo, pageSize) => {
  try {
    loading.value = true;
    const { data } = await GetMatchmakerInfoPage(pagination, {
      pageNum: pageNo,
      pageSize,
    });
    loading.value = false;
    const list = data.records || [];
    pagingRefs.value.complete(list);
  } catch (error) {
    loading.value = false;
    pagingRefs.value.complete(false);
  }
}

onShow(() => {
  nextTick(() => {
    // 设置页面标题
    themeConfig.title = '悬赏征婚❤缘分定制';
    pagingRefs.value.reload();
  })
})


const city = ref('筛选区域');
// 去选择地区页面
const toSelectAddress = () => {
  const { provinceId, cityId, districtId } = pagination || {};
  const list = [provinceId, cityId, districtId].filter(item => !!item);
  uni.navigateTo({
    url: '/feature/areaPicker?areaStr=' + list.join(','),
  })
}

const handleClear = () => {
  for (const key in pagination) {
    delete pagination[key];
  }
  city.value = '筛选区域';
  pagingRefs.value.reload();
}

// 更新城市
function handleUpdateArea(data) {
  if (!data) {
    city.value = '筛选区域';
    Object.assign(pagination, {
      provinceId: undefined, 
      cityId: undefined, 
      districtId: undefined
    })
    pagingRefs.value.reload();
    return
  }
  
  const [valStr, labelStr] = data.split('/');
  const [provinceVal, cityVal, districtVal] = valStr.split(',');
  const labelList = labelStr.split(',');
  
  city.value = labelList.join('');
  Object.assign(pagination, {
    provinceId: provinceVal, 
    cityId: cityVal, 
    districtId: districtVal
  })
  pagingRefs.value.reload();
}

onLoad(() => {
  uni.$on('updateArea', handleUpdateArea);
})

// 页面卸载时移除监听
onUnload(() => {
  uni.$off('updateArea', handleUpdateArea);
})
</script>

<style lang="scss" scoped>
</style>
